<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: fzy-2
  Date: 2021/4/16
  Time: 20:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath(); %>
<html>
<head>
    <meta charset="utf-8">
    <title>上机考试系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- le styles -->
    <link href="<%=path%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=path%>/css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="<%=path%>/css/exam.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px;
            /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link href="<%=path%>/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- le html5 shim, for ie6-8 support of html5 elements -->
    <!--[if lt ie 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
<%@ include file="/WEB-INF/pages/Teacher/teacher_header.jsp" %>

<div class="container">
    <h1>
        <img src="<%=path%>/img/exam-teacher.png" alt=""/> 上机考试管理
    </h1>

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th class="span3">考试名称</th>
            <th class="span3">考试时间</th>
            <th>创建人</th>
            <th>上传试卷</th>
            <th>自动开始</th>
            <th>进行中</th>
            <th>已结束</th>
            <th>已归档</th>
            <th>已清理</th>
            <th>&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${exams}" var="exam">
            <tr>
                <th class="span3">${exam.name}</th>
                <th class="span3">${exam.starttime}</th>
                <th class="span4">${exam.creator}</th>
                <th class="span4">${exam.exampaper}</th>
                <th class="span4"><label>
                    <c:if test="${exam.autostart == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.autostart == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.underway == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.underway == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.finished == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.finished == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.archived == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.archived == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label></th>
                <th class="span4"><label>
                    <c:if test="${exam.cleaned == true}">
                        <input type="checkbox" checked="checked" disabled/>
                    </c:if>
                    <c:if test="${exam.cleaned == false}">
                        <input type="checkbox" disabled/>
                    </c:if>
                </label>
                </th>
                    <%--                exam id,加哪里都可--%>
                <input class="examId" name="input" type="hidden" value="${exam.id}"/>
                    <%--                如果进行中，出现结束按钮--%>
                <th class="span7">
                    <c:if test="${exam.underway}">
                    <button class="btn btn-primary stop">结束考试</button>
                    </c:if>
                    <c:if test="${!exam.underway}">
                        <button style="display: none" class="btn btn-primary stop">结束考试</button>
                        <c:if test="${exam.finished}">
                            <button class="btn btn-primary download" title="打包下载答卷">下载</button>
                            <button class="btn btn-primary guidang" title="导出提交记录">归档</button>
                        </c:if>
                        <c:if test="${!exam.finished}">
                                <button style="display: none" class="btn btn-primary download">下载</button>
                                <button style="display: none" class="btn btn-primary guidang">归档</button>
                        </c:if>
                    </c:if>

                </th>
            </tr>
        </c:forEach>
        </tbody>
    </table>
<%--    下载答卷时要用--%>
    <form style="display: none" class="downForm" action="" method="post">
        <label>
        </label>
    </form>
</div>
<!-- /container -->
<!-- placed at the end of the document so the pages load faster -->
<script src="<%=path%>/js/jquery.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>
<script>
    const stopBtn = $(".stop");
    const downloadBtn = $(".download");
    const guidangBtn = $(".guidang");
    const examId = $(".examId");

    for (let i = 0; i < stopBtn.length; i++) {
        stopBtn[i].addEventListener("click", function () {
            console.log($(examId[i]).val())
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/teacher_exam_stop",
                data: {id: $(examId[i]).val()},
                success: function () {},
                error: function (e) {
                    console.log(e);
                }
            })
        })
    }
    for (let i = 0; i < downloadBtn.length; i++) {
        downloadBtn[i].addEventListener("click", function () {
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/getName",
                data: {id: $(examId[i]).val()},
                success: function (data) {
                    $($(".downForm")[0]).attr("action","${pageContext.request.contextPath}/downloadServlet?filename="+data+".zip&examid="+$(examId[i]).val());
                    $(".downForm")[0].submit();
                },
                error: function (e) {
                    console.log(e);
                }
            })
        })
    }
</script>
<script src="<%=path%>/js/bootstrap-datetimepicker.js"></script>
<script src="<%=path%>/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</body>
</html>